<my-pageheader></my-pageheader>

<mat-card style="margin: 20px 20px 50px 20px">
    <h2 align="center">成语接龙</h2>
    <br><br>
    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <mat-form-field>
                <input matInput [(ngModel)]="idiom" type="text" placeholder="当前成语">
            </mat-form-field>
        </mat-card>
    </div>
    <br>
    <div class="row justify-content-center">
        <button mat-raised-button color="primary" (click)="predict()" [disabled]="sending || !idiom">
            成语接龙
        </button>
    </div>
    <br>
    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <div *ngIf="next && history.length > 0 && !error && !sending">
                <p style="font-size: 36px">
                    {{next}}
                </p>
                <ul>
                    <li *ngFor="let text of history">
                        {{text}}
                    </li>
                </ul>
            </div>
            <p *ngIf="history.length < 1 && !next && !sending && !error">
                接龙历史
            </p>

            <div *ngIf="error">
                出错啦...
            </div>

            <div *ngIf="sending">
                正在苦思冥想...
            </div>
            <mat-spinner *ngIf="sending"></mat-spinner>

        </mat-card>
    </div>
</mat-card>

